<template>
  <div>
    <van-nav-bar title="账号信息" left-arrow @click-left="onClickLeft" />
    <van-cell-group inset>
      <van-cell title="账号" :value="this.email" />
      <van-cell title="昵称" :value="this.nickname" @click="nicknameFn()" />
      <van-cell @click="introductionsFn()" class="introductionsBox">
        <span>简介</span>
        <p>{{ this.introductions }}</p>
      </van-cell>
      <van-cell title="更改密码" @click="changePasswordFn()" />
    </van-cell-group>
    <div class="btnBox" style="margin: 16px">
      <van-button color="#f34f4f" round block native-type="submit" @click="exitFn">退出登录</van-button>
    </div>
    <!-- 修改昵称弹窗 -->
    <van-dialog v-model="nicknameShow" title="修改昵称" show-cancel-button :before-close="nicknameClose">
      <van-form>
        <van-field v-model="eduserinfo.nickname" autocomplete="off" input-align="center" clearable autofocus="true" name="valNickname" :rules="[{ validator: valNickname, message: '昵称只能为2~10位中英数字组合' }]" :placeholder="this.nickname" />
      </van-form>
    </van-dialog>
    <!-- 修改简介弹窗 -->
    <van-dialog v-model="introductionsShow" title="修改简介" show-cancel-button :before-close="introductionsClose">
      <van-form>
        <van-field v-model="eduserinfo.introductions" input-align="center" clearable autofocus="true" name="valIntroductions" :rules="[{ validator: valIntroductions, message: '个人简介只能为1~15位中英数字组合' }]" :placeholder="this.introductions" autocomplete="off" />
      </van-form>
    </van-dialog>
    <!-- 退出通知 -->
    <LNotify :visible="visibleShow" :loading="loadingShow" :title="loginErr">
      <template #iconOk v-if="iconOk">
        <van-icon name="thumb-circle" class="iconOk" />
      </template>
      <template #iconErr v-else>
        <van-icon name="warning" class="iconErr" />
      </template>
    </LNotify>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant'
import { updateUserApi } from '@/api/index'
import { removeToken } from '@/utils/locaToken'
import LNotify from '@/components/packaging/L-Notify.vue'
export default {
  name: 'usereditIndex',
  components: {
    LNotify
  },
  data () {
    return {
      email: this.$store.state.userInfoData.email,
      nickname: this.$store.state.userInfoData.nickname,
      introductions: this.$store.state.userInfoData.introductions,
      // 昵称弹出框
      nicknameShow: false,
      nicknamerules: /^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/,

      // 简介弹出框
      introductionsShow: false,
      introductionsrules: /^[a-zA-Z0-9\u4e00-\u9fa5]{1,15}$/,

      // 修改信息
      eduserinfo: {
        // 修改后的昵称
        nickname: this.$store.state.userInfoData.nickname,
        // 修改后的简介
        introductions: this.$store.state.userInfoData.introductions,
        id: this.$store.state.userInfoData.id
      },
      // 邮箱注册通知
      visibleShow: false, // 弹窗组件 显示
      loadingShow: true, // 加载动画 显示
      loginErr: '', // 通知文字
      iconOk: true // 登陆成功/失败图标
    }
  },
  methods: {
    // 点击导航栏做箭头
    onClickLeft () {
      this.$router.replace('/home')
    },
    // 点击昵称
    nicknameFn () {
      this.nicknameShow = true
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过
    valNickname (val) {
      return this.nicknamerules.test(val)
    },
    valIntroductions (val) {
      return this.introductionsrules.test(val)
    },

    // 修改昵称弹出框
    async nicknameClose (action, done) {
      // 点击确定按钮
      if (action === 'confirm') {
        // console.log(this.eduserinfo.nickname)
        if (this.nicknamerules.test(this.eduserinfo.nickname) === false) {
          done(false)
        } else {
          // console.log('api接口修改昵称')
          // console.log(this.$store.state.user)
          // 修改昵称
          // 重新拿到用户登录账号密码重新请求用户信息,更新用户信息
          await updateUserApi(this.eduserinfo)
          // 将用户信息更新到vuex
          this.$store.dispatch('updateUserData', this.$store.state.user)
          // 修改后的昵称回显
          this.nickname = this.eduserinfo.nickname
          this.nicknameShow = false
          Toast.success({
            duration: 1400,
            forbidClick: true,
            message: '修改昵称成功'
          })
        }
        done()
      } else {
        // 点击取消按钮
        // console.log('取消')
        this.eduserinfo.nickname = null
        done(true)
      }
    },
    // 修改简介弹出框
    async introductionsClose (action, done) {
      // 点击确定按钮
      if (action === 'confirm') {
        if (this.introductionsrules.test(this.eduserinfo.introductions) === false) {
          done(false)
        } else {
          // console.log('api接口修改昵称')
          // console.log(this.$store.state.user)
          // console.log(this.eduserinfo)
          // 修改昵称
          // 重新拿到用户登录账号密码重新请求用户信息,更新用户信息
          // const data =
          await updateUserApi(this.eduserinfo)
          // console.log(data)
          // 将用户信息更新到vuex
          this.$store.dispatch('updateUserData', this.$store.state.user)
          // 修改后的简介回显
          this.introductions = this.eduserinfo.introductions
          this.introductionsShow = false
          Toast.success({
            duration: 1400,
            forbidClick: true,
            message: '修改简介成功'
          })
        }
        done()
      } else {
        // 点击取消按钮
        // console.log('取消')
        this.eduserinfo.introductions = null
        done(true)
      }
    },
    // 点击简介
    introductionsFn () {
      this.introductionsShow = true
    },
    // 点击修改密码
    changePasswordFn () {
      this.$router.replace('./pwdedit')
    },
    // 退出登录
    exitFn () {
      this.visibleShow = false
      Dialog.confirm({
        message: '您确定要退出嘛~'
      })
        .then(() => {
          // 清除token
          removeToken()
          // vuex 持久化 也要清除
          localStorage.removeItem('vuex')
          this.visibleShow = true
          setTimeout(() => {
            this.visibleShow = false
            this.$router.replace({ name: 'login', params: { quitOkMsg: true } })
          }, 1800)
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content {
  height: 60px;
}
/deep/.van-nav-bar .van-icon {
  color: #000000;
  font-size: 25px;
}
/deep/[class*="van-hairline"]::after {
  border: 0;
}
.van-cell-group--inset {
  margin: 20px 10px;
  .introductionsBox {
    .van-cell__value {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      span {
        color: #000000 !important;
        font-size: 16px !important;
        font-weight: 550 !important;
      }
      p {
        font-size: 14px !important;
        color: #969799 !important;
      }
    }
  }
  .van-cell {
    padding: 15px 20px;
    box-shadow: 1px 1px 8px 0px #ededed;
    border: 0.2px solid #ededed;
    margin: 10px 0;
    border-radius: 10px;
    .van-cell__title {
      span {
        font-size: 16px;
        font-weight: 550;
      }
    }
    .van-cell__value {
      span {
        font-size: 14px;
        color: #969799;
      }
    }
  }
  .van-cell::after {
    border-bottom: 0;
  }
}
.btnBox {
  margin: 16px;
  padding-top: 30px;
  h5 {
    padding-top: 30px;
    text-align: center;
    font-size: 16px;
    color: #969799;
  }
}
.van-dialog__content {
  .van-cell {
    padding-top: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
/deep/.van-field__value {
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/deep/.van-field__error-message {
  padding-top: 10px;
}
/deep/.van-dialog__message{
  font-size: 18px !important;
}
/deep/ .iconErr {
  color: #eb400c !important;
}
</style>
